<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div class="container">
      <header>
         <hgroup>
           <h1>我是主标题</h1>
           <h2>我是副标题</h2>
         </hgroup>
         <p>
           我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题
           我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题
         </p>

      </header>
      <nav>
        <a href="#"> 菜单 >> </a>
        <ul>
          <li><a href="#"> 主页 </a></li>
          <li><a href="#"> 产品 </a></li>
          <li><a href="#"> 项目 </a>
            <ul>
              <li><a href="#">Node.js</a></li>
              <li><a href="#">three.js</a>
                <ul>
                  <li><a href="#"> 1 </a></li>
                  <li><a href="#"> 2 </a></li>
                  <li><a href="#"> 3 </a></li>
                </ul>
              </li>
              <li><a href="#">CQRS.js</a></li>
            </ul>
          </li>
          <li><a href="#"> 关于我们 </a></li>
        </ul>
      </nav>
      <div class="main">
         <section class="product-list">
            <h1> 产品展示 </h1>
            <div class="product">
               <h4> 产品名称 </h4>
               <img src="p.jpg" alt="">
               <p> 产品描述 </p>
            </div></section>

         <section>

         </section>
      </div>

      <footer>

      </footer>

      <script type="text/javascript">
         const pdom = document.querySelector(".product");
         const productListDom = document.querySelector(".product-list");

         for(let i=0;i<20;i++){
            productListDom.insertAdjacentHTML("beforeEnd", pdom.outerHTML);
         }

         // pdom.remove();
         // pdom.outerHTML);
      </script>

      <script src="index.js">

      </script>

    </div>
  </body>
</html>
